<template>
	<!-- <view>
		<image class="bg" src="/static/login/log_bg.png" mode="scaleToFill"></image> -->
		<view class="content" :style="{'background':kbackgroundColor}" style="min-height: 100vh;">
		<!-- <image class="mart_bg" src="/static/detail/detail_bg.png" mode="scaleToFill"></image> -->
		<hx-navbar :title="info.name" :back="true" :fixed="false" :color="knavTitleColor" barPlaceholder="hidden"
			transparent="auto"></hx-navbar>
		<view class="noticeTip" @click="toRecord()" :style="{border:kborderSty}">交易记录</view>
			<view class="qbnoticeTip" @click="toAllshop()" :style="{border:borderSty}">查看全部</view>
		<view class="container">
			<view class="collect_img_box">
				<!--  -->
				<view class="imgCont" :class="[{'linear_box':yansheng==='black'},{'white_box':yansheng==='purple'}]">
					<view class="" style="width: 97%;height: 97%;margin: 10rpx auto;background-color: #000;border-radius: 20rpx;">
						<image :src="info.image" mode="aspectFit" class="collect_image"></image>
					</view>
					<!-- <iframe :src="info.image" v-if="info.type == 1" class="collect_image" frameborder="0"></iframe> -->
				</view>
				<!-- <image src="/static/index/taizi.png" mode="widthFix" class="taizi_img"></image> -->
				<view class="title" :style="{color:knavTitleColor}">{{info.name}}</view>
				<view class="dataWrap">
					<view class="" :class="[{'data':yansheng==='black'},{'num':yansheng==='purple'}]">
						<view class=" "  >限量</view>
						<view class="" >{{info.quantity}}份</view>
					 
					</view>
					<view class="" :class="[{'data':yansheng==='black'},{'num':yansheng==='purple'}]">
						<view class=" "  >流通</view>
						<view class="">{{info.nftQuantity}}份</view>
					</view>
				</view>
			</view>
			<view class="content">
			<view class=""  :class="{'biankuang':yansheng==='black'}">
				<view class="goodslist"  >
						<view class="sort">
							<view class="sort_box">
								<!-- <view class="sort_box-item" style="width: 50%;">
									<text class="asc" :class="{'active': order =='give_time desc'}"
										@click="setOrder('give_time desc')">最新上架</text>
								</view> -->
								<view class="sort_box-item" style="width: 30%;" :style="[seltyle]">
									<text class="asc" :class="{'active': order}" @click="setOrder(true)">价格升序</text>
								</view>
								<view class="sort_box-item" style="width:30%;" :style="[seltyle]">
									<text class="desc" :class="{'active': !order}" @click="setOrder(false)">价格降序</text>
								</view>
							</view>
						</view>
						<scroll-view class="scroll" scroll-y="true" @scrolltolower="lower">
							<view class="list">
								<template v-for="(item, index) in list">
									<view class="item" :key="index">
										<view class="ceil" style="width: 47%;">
											<view class="label">
												<image
													:src="!item.market_lock_status?'/static/mart/shou.png':'/static/mart/lock.png'"
													mode="aspectFit"></image>
												<text>{{item.tokenId}}</text>
											</view>
											<!-- <view class="name">发行方：{{item.author_name}}</view> -->
										</view>
										<view class="ceil" style="width: 30%;">
											<view class="price">
												<text class="unit">￥</text><text>{{item.price|fp}}</text>
											</view>
											<view class="name">寄售价格</view>
										</view>
										<view class="ceil" style="width:20%;">
											<view class="buy" :style="{background:buttonBcak}" @tap="go_detail(item)" v-if="!item.payLock">
												立即购买
											</view>
											<view v-else class="status">支付中</view>
										</view>
									</view>
								</template>
							</view>
						</scroll-view>
					</view>
				
			</view>
			</view>
			<!-- <image class="bot-img " src="/static/user/bot.png" mode="widthFix"></image> -->
		</view>
		<view class="bottom-view">
			<view class="operate" @click="openbatch" :style="{background:buttonBcak}">批量下单</view>
			<view class="operate" @click="confirm" :style="{background:buttonBcak}">快捷下单</view>
		</view>
		<uni-popup ref="orderForm" type="share" safeArea>
			<view class="" style="height: 620rpx;border-radius: 30rpx  30rpx 0 0;background-color: #fff;">

				<view class="" style="width: 100%;height: 600rpx;position: relative;">
					<view class="" style="width: 100%;height: 90rpx;">
						<view class="" @tap="closebatch"
							style="position: absolute;right: 20rpx;top:15rpx;width: 35rpx;height: 35rpx;border-radius: 40rpx;text-align: center;line-height: 70rpx;">
							<image src="@/static/index/close.png" style="width:100%;" mode="widthFix"></image>
						</view>

					</view>
					<view class="order_info_item"
						style="display: flex;justify-content: space-between;padding: 20rpx 50rpx;">
						<view class="">
							购买数量
						</view>
						<view class="">
							<uni-number-box v-model="batchNum" :max="10" :min="1" @change="changeValue" />
							<!-- @blur="blur" @focus="focus"  /> -->
						</view>
					</view>
					<view class="" style="height:100rpx;margin: 0 auto ;width: 100%;position:absolute;bottom:  50rpx;">
						<view class="btntk" @tap="createBatchOrder" :style="{background:buttonBcak}">
							提交
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
 
</template>

<script>
import { navigateTo } from '../../config/common.js'
	export default {
		data() {
			return {
				 borderSty:this.$store.state.borderSty,//邊框
				knavTitleColor: this.$store.state.knavTitleColor, //字体暂用
				buttonBcak: this.$store.state.buttonBcak, //按钮颜色
				ColorSize: this.$store.state.ColorSize, //背景顔色
				seltyle:{	
					'--ColorSize': this.$store.state.ColorSize, //背景顔色
					'--borderSty':this.$store.state.borderSty,//邊框
				},
				id: '',
				list: [],
				page: 1,
				hasNextPage: true,
				limit: 10,
				info: {
					mang_list: []
				},
				author:{},
				category:{},
				order: true,
				goods_id: '',
				batchNum: 1,
				yansheng:"",
				isLoading:false,
			}
		},
		onLoad(options) {
			this.yansheng = this.$store.state.ktheme
			this.id = options.id;
			this.goods_id = options.goods_id;
			this.get_info()
		},
		onShow() {
			if (this.id) {
				this.page = 1;
				this.get_data_list()
			}
		},
		onPullDownRefresh() {
			this.page = 1;
			this.get_data_list();
			uni.stopPullDownRefresh();
		},
		onReachBottom() {
			if (this.hasNextPage && !this.isLoading) {
				this.page += 1;
				this.get_data_list()
			}
		},
		methods: {
			openbatch() {
				this.$refs.orderForm.open();
			},
			closebatch() {
				this.$refs.orderForm.close();
			},
			changeValue(a) {
				this.batchNum = a;
			},
			createBatchOrder() {
				let body = {
					iid: this.id,
					payWay: 2,
					quantity: this.batchNum
				}
				this.$api.createBatchOrder(body,res=>{
					if(res.status){
						uni.navigateTo({
							url:'/pages/payment/batch?order_id='+res.data
						})
					}else{
						this.$common.errorToShow(res.message)
					}
				})
			},
			toRecord() {
				uni.navigateTo({
					url: '/pages/mart/record?iid=' + this.id
				})
			},
			toAllshop(){
				console.log("-----this.id",this.id)
				uni.navigateTo({
					url: '/pages/mart/item_all_list?iid=' + this.id
				})
			},
			get_info() {
				if (!this.id) {
					this.$common.errorToShow('商品失效')
					uni.navigateBack()
					return;
				}
				let userToken = this.$db.get("userToken");
				let data = {
					sn: this.id
				}
				if (userToken) {
					data.token = userToken;
				}
				this.$api.getGoodsDetails(this.id, res => {
					if (res.status) {
						this.info = res.data;
						this.author = this.info.author
						this.category = this.info.category
					}
				})
			},
			lower(e) {
				if (this.hasNextPage && !this.isLoading) {
					this.page += 1;
					this.get_data_list();
				}
			},
			get_data_list: function() {
				this.isLoading = true
				let data = {
					pageNo: this.page,
					// limit: this.limit,
					iid: this.id,
					orderBy: 'price',
					asc: this.order
				}

				let token = (this.$db.get('userToken'));
				if (token) data.token = token
				this.$api.getMarketGoodsListt(data, res => {
					this.isLoading = false
					if (res.status) {
						if(this.page == 1){
							this.list = [];
							this.list = res.data;
						}else{
							this.list = this.list.concat(res.data);
						}
						this.hasNextPage = res.data.length >= this.limit;
					}
				})
			},
			setOrder: function(order) {
				this.order = order;
				this.page = 1;
				this.get_data_list()
			},
			go_detail: function(item) {
				if (item.status == 2) {
					this.$common.errorToShow('该商品正在交易中，看看别的吧')
					return;
				}
				uni.navigateTo({
					url: '/pages/mart/mart_details?id=' + item.nftId
				})
			},
			confirm: function() {
				let source = 1
				// #ifdef APP
				source = 5
				// #endif
				// #ifdef H5
				source = 2
				// #endif
				// #ifdef MP
				source = 3
				// #endif
				let isOk = false;
				let nft = {};
				for (var i = 0; i < this.list.length; i++) {
					if (this.list[i].status === 1) {
						isOk = true;
						nft = this.list[i];
						break;
					}
				}
				if (!isOk) {
					this.$common.errorToShow('没有商品可以购买', () => {})
					return;
				}
				let data = {
					nftId: nft.nftId,
				}
				this.$api.createMartOrder(data, res => {
					if (res.status) {
						let pay_data = res.data;
						this.$common.navigateTo('/pages/payment/index?order_id=' + res.data);;
					} else {
						this.$common.errorToShow(res.message, () => {})
					}
				})
			},
		},
	}
</script>

<style lang="scss">
	@import "@/pages/index/detail.scss";
	
	
</style>

<style lang="scss" scoped>
	/deep/ .uni-numbox__minus {
		font-size: 30px;
	}
	/deep/ .uni-numbox__plus {
		font-size: 30px;
	}
	/deep/ .uni-numbox__value{
		font-size: 20px;
	}
	.collect_img_box {
		padding-top: 57rpx;

		.title {
			text-align: center;
			font-size: 32rpx;
			
		font-family: SimHei;
		font-weight: 400;
			margin: 25rpx 0 30rpx;
		}

		.dataWrap {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-bottom: 20rpx;

			.data {
				color: white;
				width:230rpx;
				text-align: center;
				display: flex;
				justify-content: space-evenly;
				border-radius: 60rpx;
				border: 1px solid #A3B665;	
			}
			.num {
				width:230rpx;
				text-align: center;
				display: flex;
				justify-content: space-evenly;
				border-radius: 60rpx;
				border: 1px solid blueviolet;
				color: black;
			}

			&>view:first-child {
				margin-right: 19rpx;
			}
		}
	}

	.btntk {
		width: 590rpx;
		height: 80rpx;
		margin: 10rpx auto;
		border-radius: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
		color: #fff;
		font-weight: 400;
	}

.biankuang{
	padding: 0;
	margin: 0 auto;
	background: linear-gradient(0deg, #55CC7C 0%, #F5F97F 100%);
	border-radius: 15rpx;
	border: 10rpx solid ;
	border-image: linear-gradient(0deg, #55CC7C, #F5F97F) 10 10;
		clip-path: inset(0 round 12rpx);
}
	.content {
		padding: 0 40rpx;
		padding-bottom: 80rpx;
		.goodslist {
			width: 100%;
			height: auto;
			background-color: $bg-box;
			border-radius: 20rpx;
		
			padding: 25rpx 26rpx 0 32rpx;

			.sort {
				width: 100%;
				margin-bottom: 12rpx;

				.sort_box {
					width: 100%;
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;

					.sort_box-item {
						font-size: 28rpx;
						color: #666;
						position: relative;
					}

					.active {
						color: #000;
						font-weight: bold;
					}

					.active::after {
						display: block;
						clear: both;
						content: '';
						width: 56rpx;
						height: 7rpx;
						background:var(--ColorSize);//linear-gradient(308deg, #FE0058 0%, #FF5B6C 100%);
						border-radius: 100rpx;
						position: absolute;
						left: 3rpx;
						bottom: -5rpx;
					}
				}
			}

			.scroll {
				width: 100%;
				max-height: 582rpx;

				.list {
					width: 100%;

					.item {
						padding: 30rpx 0;
						border-bottom: 1rpx solid #EBEBEB;
						display: flex;
						align-items: center;

						.ceil {
							.label {
								display: flex;
								align-items: center;

								image {
									width: 32rpx;
									height: 32rpx;
									display: block;
									margin-right: 5rpx;
								}

								text {
									font-size: 36rpx;
									color: #000;
									font-weight: bold;
								}
							}

							.name {
								font-size: 22rpx;
								color: #999;
								font-weight: 500;
								margin-top: 5rpx;
							}

							.price {
								text {
									font-size: 36rpx;
									color: #000;
									font-weight: bold;
								}

								.unit {
									font-size: 24rpx;
								}
							}

							.buy {
								width: 120rpx;
								height: 42rpx;
								background: linear-gradient(308deg, #FE0058 0%, #FF5B6C 100%);
								border-radius: 100rpx;
								text-align: center;
								line-height: 42rpx;
								font-size: 18rpx;
								color: #fff;
								font-weight: 500;
							}

							.status {
								width: 120rpx;
								height: 42rpx;
								background-color: #FFE4E8;
								border-radius: 45rpx;
								text-align: center;
								line-height: 42rpx;
								font-size: 18rpx;
								color: #863A3A;
								font-weight: 500;
							}
						}
					}

					&>view:last-child {
						border-bottom: 0;
					}
				}
			}
		}
	}

	.font-blod {
		font-weight: 800;
	}

	.m-t-5 {
		margin-top: 5rpx;
	}

	.bottom-view{
		text-align: center;
		display: flex;
		position:fixed;
		justify-content: space-between;
		left: 0;
		bottom:30rpx;
		width: 100%;
		z-index: 100;
		padding: 0 40rpx;
	}
	.operate {
		width: 280rpx;
		height: 80rpx;
		background: linear-gradient(308deg, #FE0058 0%, #FF5B6C 100%);
		border-radius: 100rpx;
		text-align: center;
		line-height: 80rpx;
		font-size: 32rpx;
		color: #fff;
		font-weight: 400;
		z-index: 10;
	}
	.qbnoticeTip{
			width: 119rpx;
			height: 41rpx;
			z-index: 20;
			background-color: #fff;
			border-radius: 100rpx 0 0 100rpx;
			// border: 2rpx solid #FE005A;
			border-right: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 22rpx;
			color: #333;
			font-weight: 400;
			position: absolute;
			top: 184rpx;
			right: 0;
			// z-index: 10;
	}
</style>